<template>
    <div>
        <!-- 保后检查审批:fzBhjcsp-->
        <div class="w_100 headTips d_f j_c_s_b">
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
            <el-button type="primary" v-if="type == 'useForm' && isReset == 1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox fzBhjcsp">
            <div class="fzBhjcsp_form">
                <myform :fields="fields" ref="form1" :rules="rules" :model="model.afterInspectApproveProcess"
                    :options="options" class="m_t_16">
                    <template v-slot:auditStatus>
                        <div class="d_f w_100 j_c_s_b" v-if="type != 'smallForm'">
                            <div class=" p_r"
                                :class="model.afterInspectApproveProcess.auditStatus == 2 ? 'success_btn' : 'default_btn'"
                                @click="changeStstus(2)">
                                <img src="../../assets/formsSuccess.png" alt=""
                                    v-if="model.afterInspectApproveProcess.auditStatus == 2">
                                <img src="../../assets/formSuccess1.png" alt="" v-else>
                                <span class="m_l_10">同意</span>
                                <img src="../../assets/formSelected1.png" alt="" class="formSelected"
                                    v-if="model.afterInspectApproveProcess.auditStatus == 2">
                            </div>
                            <div class=" p_r"
                                :class="model.afterInspectApproveProcess.auditStatus == 3 ? 'error_btn' : 'default_btn'"
                                @click="changeStstus(3)">
                                <img src="../../assets/formError.png" alt=""
                                    v-if="model.afterInspectApproveProcess.auditStatus == 3">
                                <img src="../../assets/formError1.png" alt="" v-else>

                                <span class="m_l_10">不同意</span>
                                <img src="../../assets/formSelected.png" alt="" class="formSelected"
                                    v-if="model.afterInspectApproveProcess.auditStatus == 3">
                            </div>
                        </div>
                        <div class="d_f w_100 j_c_s_b" v-else>
                            <div class=" p_r"
                                :class="model.afterInspectApproveProcess.auditStatus == 2 ? 'default_btn1' : 'default_btn'"
                                >
                                <img src="../../assets/detail_success.png" class="formError" alt=""
                                    v-if="model.afterInspectApproveProcess.auditStatus == 2">
                                <img src="../../assets/formSuccess1.png" class="formError" alt="" v-else>
                                <span class="m_l_10">同意</span>
                                
                                <img src="../../assets/detail_god.png" alt="" class="formSelected"
                                    v-if="model.afterInspectApproveProcess.auditStatus == 2">
                            </div>
                            <div class=" p_r"
                                :class="model.afterInspectApproveProcess.auditStatus == 3 ? 'default_btn1' : 'default_btn'"
                               >
                                <img src="../../assets/detail_error.png" class="formError" alt=""
                                    v-if="model.afterInspectApproveProcess.auditStatus == 3">
                                <img src="../../assets/formError1.png" class="formError" alt="" v-else>

                                <span class="m_l_10">不同意</span>
                                <img src="../../assets/detail_god.png" alt="" class="formSelected"
                                    v-if="model.afterInspectApproveProcess.auditStatus == 3">
                            </div>
                        </div>
                    </template>
                </myform>
            </div>
            <div class="segment" v-if="fields1.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields1.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div v-if="fields1.length > 0">
                <myform :fields="fields1" :model="model.afterInspectApproveProcess" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { fzBhjcspType } from './data'
import { copy } from '../../utils/date'
import { formGet, unitFormSet } from '../../api/system/flowPath'
import { listByParentArr } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { useRouter } from 'vue-router'
import { CloseBold } from '@element-plus/icons-vue'
const model = {
    afterInspectApproveProcess: {
        auditStatus: '',//审批状态：3未通过，2-通过
        isWarn: 1,//是否预警：1-是，2否
        approvalRemark: '',//监察人意见
        isReview: 1
    },
}
export default defineComponent({
    name: '',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        nodeObj: {
            type: Object,
            default: {}
        },
        vars: {
            type: Object,
            default: {}
        },
        isAudit: {
            type: Boolean,
            default: true
        }
    },
    components: {
        CloseBold
    },
    setup(props: any) {
        const data: fzBhjcspType = reactive({
            name: '保后检查审批',
            model: copy(model),
            status: true,
            id: '',
            subTitle: '',
            options: {
                isWarn: [
                    {
                        label: '是',
                        value: 1
                    },
                    {
                        label: '否',
                        value: 2
                    }
                ],
            },
            fields: [
                {
                    label: "结论",
                    prop: 'auditStatus',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "是否预警",
                    prop: 'isWarn',
                    placeholder: '请选择是否预警',
                    type: 'radio',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "检查人意见",
                    prop: 'approvalRemark',
                    placeholder: '请输入检查人意见',
                    type: 'textarea',
                    labelWidth: '150px',
                    disabled: false,
                },
            ],
            rules: {
                auditStatus: [
                    { required: true, message: '请选择结论', trigger: 'change' },
                ],
                isWarn: [
                    { required: true, message: '请选择是否预警', trigger: 'change' },
                ],
                // approvalRemark: [
                //     { required: true, message: '请输入检查人意见', trigger: 'blur' },
                // ],
            },
            fields1: [],
            isReset: 2,
        })
        const router = useRouter()
        const form1 = ref()
        onBeforeMount(() => {
            methods.getData()
            data.status = props.isEnabled == 0 ? false : true
        })
        const methods = {
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            //获取自定义表单
            getData() {
                formGet({ tag: 'fzBhjcsp' }).then((res: any) => {
                    data.id = res.id
                    data.name = res.name
                    data.isReset = res.isReset
                    if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                    data.subTitle = res.subTitle
                    let formStruct = JSON.parse(res.formStruct)
                    formStruct.formFields.map((item: any) => {
                        data.model.afterInspectApproveProcess[item.prop] = ''
                    })
                    data.fields1 = formStruct.formFields
                   if(props.type=='smallForm'){
                     data.fields.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                   }
                    data.fields1.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    if (props.vars) {
                        const localData = props.vars
                        for (let key in data.model.afterInspectApproveProcess) {
                            if (localData.afterInspectApproveProcess[key] != null) {
                                data.model.afterInspectApproveProcess[key] = localData.afterInspectApproveProcess[key]
                            }
                        }
                        if (props.type == 'useForm') {
                            data.model.afterInspectApproveProcess.approvalRemark = ''
                        }
                    }
                    if (props.type == 'useForm') {
                        data.model.afterInspectApproveProcess.approvalRemark = ''
                        data.model.afterInspectApproveProcess.auditStatus = ''
                    }
                    let arr = formStruct.formFields.filter((item: any) => {
                        return item.type == 'select'
                    })
                    let ids = arr.map((item: any) => {
                        return item.prop
                    })
                    if (ids.length == 0) return
                    listByParentArr({ ids: ids }).then((res: any) => {
                        ids.map((item: any) => {
                            data.options[item] = res[item]
                        })
                    })
                })
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            //清除表单数据
            clearForm() {
                data.model = copy(model)
            },
            resultData() {
                return new Promise((resolve, reject) => {
                    form1.value.verification().then((res) => {
                        resolve(data.model)
                    }).catch(() => {
                        reject(false)
                    })
                })
            },
            changeStstus(status: string | number) {
                data.model.afterInspectApproveProcess.auditStatus = Number(status)
            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
        }
        return {
            ...toRefs(data),
            ...methods, form1
        }
    }
})
</script>
<style lang='scss'>
.fzBhjcsp {
    .el-form-item {
        width: 50% !important;
        margin-right: 0px !important;

        .el-form-item__content {
            width: calc(100% - 150px) !important;

            .el-input,
            .el-cascader,
            .el-select {
                width: 100% !important;
            }
        }
    }
}

.fzBhjcsp_form {
    .el-form-item {
        width: 100% !important;
    }
}
</style>